<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <link href="../css/bootstrap.4.1.1.css" rel="stylesheet">
    <link href="../css/main.css" rel="stylesheet">
    <link href="https://cdn.bootcss.com/jquery.perfect-scrollbar/1.3.0/css/perfect-scrollbar.min.css" rel="stylesheet">

    <link href="https://cdn.bootcss.com/jquery.scrollbar/0.2.11/jquery.scrollbar.min.css" rel="stylesheet">

    <link href="https://cdn.bootcss.com/overlayscrollbars/1.4.5/css/OverlayScrollbars.min.css" rel="stylesheet">
</head>
<body style="background-color: #0c5460; height: 3000px">

<div class="container wrapper">
    <div id="title1" class="container-fluid" style="background-color: #602d1c">
        <h1>标题1</h1>
    </div>
    <div id="title2" style="background-color: #0a600c">
        <h1>标题2</h1>
    </div>

    <div
         style="background-color: #adff44;
          position: absolute;
          top: 0px; left: 0px;
          margin: 20px 30px">
        <h1>标题3</h1>
    </div>
    <div class="container-fluid" style="background-color: #ff4c4a">
        <h1>标题4</h1>
    </div>

    <!-- Example single danger button -->
    <div class="btn-group">
        <button type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown" aria-haspopup="true"
                aria-expanded="false">
            Action
        </button>
        <div class="dropdown-menu">
            <a class="dropdown-item" href="#">Action</a>
            <a class="dropdown-item" href="#">Another action</a>
            <a class="dropdown-item" href="#">Something else here</a>
            <div class="dropdown-divider"></div>
            <a class="dropdown-item" href="#">Separated link</a>
        </div>
    </div>

    <div class="container-fluid" style="background-color: #1dff7d">
        <h1>标题5</h1>
    </div>

    <!-- Button trigger modal -->
    <!--data-test="modal" data-toggle="modal" -->
    <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">
        Launch demo modal
    </button>

    <!-- Modal -->
    <!--tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true"-->
    <div class="modal fade" id="exampleModal">
        <div class="modal-dialog modal-dialog-centered" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
                    <button type="button" class="close" data-dismiss="modal1" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    ...stas
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                    <button type="button" class="btn btn-primary">Save changes</button>
                </div>
            </div>
        </div>
    </div>


    <ul class="list-group">
        <li class="list-group-item">Cras justo odio</li>
        <li class="list-group-item">Dapibus ac facilisis in</li>
        <li class="list-group-item">Morbi leo risus</li>
        <li class="list-group-item">Porta ac consectetur ac</li>
        <li class="list-group-item">Vestibulum at eros</li>
    </ul>

    <div class="list-group">
        <a href="#" class="list-group-item list-group-item-action active">
            Cras justo odio
        </a>
        <a href="#" class="list-group-item list-group-item-action">Dapibus ac facilisis in</a>
        <a href="#" class="list-group-item list-group-item-action">Morbi leo risus</a>
        <a href="#" class="list-group-item list-group-item-action">Porta ac consectetur ac</a>
        <a href="#" class="list-group-item list-group-item-action disabled">Vestibulum at eros</a>
    </div>

    <div class="list-group">
        <button type="button" class="list-group-item list-group-item-action active">
            Cras justo odio
        </button>
        <button type="button" class="list-group-item list-group-item-action">Dapibus ac facilisis in</button>
        <button type="button" class="list-group-item list-group-item-action">Morbi leo risus</button>
        <button type="button" class="list-group-item list-group-item-action">Porta ac consectetur ac</button>
        <button type="button" class="list-group-item list-group-item-action" disabled>Vestibulum at eros</button>
    </div>


    <div>
        <p></p>
    </div>

    <div class="list-group drop_list scrollbar-inner" id="list_content">
        <a href="#" class="list-group-item list-group-item-action list-group-item-action-r">Cras justo odio<span aria-hidden="true">&times;</span></a>
        <a href="#" class="list-group-item list-group-item-action list-group-item-action-r">Dapibus ac facilisis in</a>
        <a href="#" class="list-group-item list-group-item-action list-group-item-action-r">Morbi leo risus</a>
        <a href="#" class="list-group-item list-group-item-action list-group-item-action-r">Porta ac consectetur ac</a>
        <a href="#" class="list-group-item list-group-item-action list-group-item-action-r">Vestibulum at eros</a>
        <a href="#" class="list-group-item list-group-item-action list-group-item-action-r">Vestibulum at eros</a>
        <a href="#" class="list-group-item list-group-item-action list-group-item-action-r">Vestibulum at eros</a>
        <a href="#" class="list-group-item list-group-item-action list-group-item-action-r">Vestibulum at eros</a>
        <a href="#" class="list-group-item list-group-item-action list-group-item-action-r">Vestibulum at eros</a>
    </div>

    <div id="mouse_div" style="height: 200px; background-color: #ff22e2">

    </div>

</div>

<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/popper.js/1.14.3/umd/popper.min.js"></script>
<script src="https://cdn.bootcss.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<script src="https://cdn.bootcss.com/jquery.perfect-scrollbar/1.3.0/perfect-scrollbar.min.js"></script>
<script src="https://cdn.bootcss.com/jquery.scrollbar/0.2.11/jquery.scrollbar.min.js"></script>
<script src="https://cdn.bootcss.com/overlayscrollbars/1.4.5/js/jquery.overlayScrollbars.min.js"></script>
<script>
    const popper = new Popper($('#title1'), $('#title2'), {
        placement: 'bottom'
    });
    console.log(popper);

    // const ps = new PerfectScrollbar('#list_content');
    //const ps1 = new PerfectScrollbar('.container');

    // $('#list_content').scrollbar();
    // $('.wrapper').scrollbar();
    // $('body').scrollbar();
    //$('.scrollbar-chrome').scrollbar();

    $("body").overlayScrollbars({ });
    $('#list_content').overlayScrollbars({ });

    $('#mouse_div').mouseover(function () {
        console.log('鼠标经过:' + $(this).val());
    });
    $('#mouse_div').mouseout(function () {
        console.log('鼠标离开:' + $(this).val());
    });

</script>
</body>
</html>